<template>
  <div id="worksDetail">
    <div class="worksDetailContent">
      <div class="worksDetailNavInfo">
        <div v-show="!sceneType"><p @click="handleHome()">首页</p><span>&gt;</span><p @click="handleCase()">实战案例</p></div>
        <div v-show="sceneType === 'sell'"><p @click="handleMarket()">创意集市</p><span>&gt;</span><p @click="handleMarket()">创意产品</p><span>&gt;</span><p>产品详情</p></div>
      </div>
      <div class="worksDetailContentBox">
        <div class="worksDetailTitle">
          <div class="worksDetailTitleInfo">
            <h2>{{worksData.literatureName || productDetails.productName || studioWorkData.awardWorkName || acquirePrizeData.awardWorkName}}</h2>
            <p>发布于：{{worksData.createTime || productDetails.createTime || studioWorkData.createTime || acquirePrizeData.createTime}}</p>
            <p v-show="sceneType !== 'masterStudio'">浏览量： {{worksData.watchNum || productDetails.watchNum || acquirePrizeData.watchNum}}</p>
            <div class="worksDetailPrice" v-show="sceneType === 'sell'">
              <span>￥{{productDetails.price}}</span>
              <button @click="onAddCollect()" :class="{blue: isCollects}">{{isCollects ? '已收藏' : '收藏'}}</button>
            </div>
            <div class="worksDetailPrice" v-show="!sceneType">
              <span>￥{{productDetails.price}}</span>
              <button @click="onAddCollect()" :class="{blue: isCollects}">{{isCollects ? '已收藏' : '收藏'}}</button>
            </div>
            <div class="worksDetailPrice" v-show="sceneType == 'acquirePrize'">
              <span>￥{{productDetails.price}}</span>
              <button @click="onAddCollect()" :class="{blue: isCollects}">{{isCollects ? '已收藏' : '收藏'}}</button>
            </div>
            <!-- <div  class="worksDetailPrice">
              <span>￥{{productDetails.price}}</span>
              <button @click="fetchCollect()" :class="{blue: isCollect === 1}">{{isCollect === 1 ? '已收藏' : '收藏'}}</button>
            </div> -->
            <div class="worksDetailShare">
              <button>分享</button>
              <div class="worksDetailShareLargeQrcode">
                <span></span>
                <img :src="href" alt="">
              </div>
            </div>
          </div>
          <div class="worksDetailStylistInfo">
            <img :src="$globalImageUrl + (worksData.avatar || productDetails.avatar || studioWorkData.avatar || acquirePrizeData.awardWorkImg)" alt="" @click="jumpTo('/stylistInfo?stylistUserId=' + (worksData.createId || productDetails.createId || studioWorkData.userId || acquirePrizeData.id))">
            <div class="worksDetailStylistInfoBox" @click="jumpTo('/stylistInfo?stylistUserId=' + (worksData.createId || productDetails.createId || studioWorkData.userId || acquirePrizeData.id))">
              <h2>{{worksData.userName || productDetails.userName || studioWorkData.userName}}</h2>
              <p>{{userTypeText(worksData.userType || productDetails.userType || acquirePrizeData.userType) || '设计师'}} | {{worksData.email || productDetails.email || studioWorkData.email || acquirePrizeData.email}}</p>
            </div>
            <div class="btnBox" v-show="sceneType === 'sell'">
              <button class="btnDef" @click="instationMsg = true">站内信</button>
            </div>
          </div>
        </div>
        <div class="worksDetailRichtext" style="padding-bottom: 0;" v-show="worksData && worksData.introduce">作品简介：<div v-html="worksData.introduce"></div></div>
        <div class="worksDetailRichtext" v-html="worksData.content || productDetails.content || studioWorkData.content || acquirePrizeData.content"></div>
        <div class="worksDetailComment">
          <div class="worksDetailAppraise">
            <label class="worksDetailPraise worksDetailTread" @click="onGiveLike()">
              <img src="../../../assets/img/common/praise_big.png" alt="" v-show="!giveLike">
              <img src="../../../assets/img/common/praise_d.png" alt="" v-show="giveLike">
              <p>点赞</p>
            </label>
          </div>
          <div class="worksDetailPublishComment">
            <textarea name="" placeholder="请输入评论" v-model="commentConText"></textarea>
            <div class="btnBox">
              <button class="btnDef" @click="handSkilladdComment()">评论</button>
            </div>
          </div>
          <div class="worksDetailCommentList">
            <h2>全部评论：{{commentData.length}}</h2>
            <ul :class="isHasOpenComment==true?'openComment':''" >
              <li v-for="(item, index) in commentData" :key="index">
                <img :src="$globalImageUrl + item.avatar" alt="">
                <div class="worksDetailCommentInfo">
                  <h3>{{item.userName}}</h3>
                  <p>{{item.content}}</p>
                  <span>{{item.createTime}}</span>
                </div>
              </li>
            </ul>
            <div v-if="commentData.length>6">
              <h3 @click="openMorecommentData()" v-if="isHasOpenComment" class="openCommentText">展开评论</h3>
              <h3 v-else @click="closeMorecommentData()" class="openCommentText">收起评论</h3>
            </div>
          </div>
        </div>
      </div>
      <div class="courseDetailContetnRecommend">
        <h2 class="courseDetailContetnRecommendTitle" v-show="!sceneType">同类作品推荐</h2>
        <h2 class="courseDetailContetnRecommendTitle" v-show="sceneType === 'sell'">推荐产品</h2>
        <div style="padding: .2rem;" v-show="sceneType !== 'masterStudio' && sceneType !== 'ideaCompany'">
          <ul>
            <li v-for="(item, index) in sameWorks" :key="index" @click="toWorksDetail(item.id)">
              <img :src="$globalImageUrl + (item.literatureImg || item.productImg)" alt="">
              <div class="practicalClassroomContentCourseInfo">
                <h3 class="ellipse">{{item.literatureName || item.productName}}</h3>
                <div class="publicBookRemark" v-show="!sceneType">
                  <img src="../../../assets/img/common/browse.png" alt="">
                  <span>{{item.watchNum}}</span>
                  <img src="../../../assets/img/common/comment.png" alt="">
                  <span>{{item.commentNum}}</span>
                  <img src="../../../assets/img/common/praise.png" alt="">
                  <span>{{item.likeNum}}</span>
                </div>
                <div v-show="sceneType === 'sell'">
                  <p class="ellipse">交易{{item.buyNum}}次</p>
                  <p style="padding-top: .1rem;">
                    <i>￥{{item.price}}</i>
                  </p>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <popup v-model="instationMsg" position="top">
        <div class="courseDetailIinstationMsg">
          <div class="userApprovePopupTitle">
            <h2>站内信</h2>
            <i @click="instationMsg = false">x</i>
          </div>
          <div class="courseDetailIinstationMsgCon">
            <textarea v-model="instationMsgContent"></textarea>
            <div class="btnBox">
              <button class="btnDef" @click="handSendMessage()">提交</button>
            </div>
            <div style="height: .42rem;"></div>
          </div>
        </div>
      </popup>
    </div>
  </div>
</template>

<script>
import { Popup } from 'vux'
import store from '@/store'
export default {
  name: 'worksDetail',
  components: {
    Popup
  },
  data () {
    return {
      sceneType: this.$route.query.sceneType || false,
      worksId: this.$route.query.worksId,
      worksData: {},
      commentData: [],
      commentTotal: 0,
      commentConText: '',
      sameWorks: [],
      productDetails: {},
      giveLike: 0, // 是否点赞 0 未点赞 1 已点赞
      studioWorkData: {},
      instationMsg: false,
      instationMsgContent: '',
      acquirePrizeData: {},
      isHasOpenComment: true, // 是否展开评论
      isCollects: false,
    }
  },
  computed: {
    href () {
      return `https://api.qrserver.com/v1/create-qr-code?data=${encodeURIComponent(window.location.href)}`
    }
  },
  created () {
    if (!this.sceneType) {
      this.fetchSkillLiterById()
      this.fetchSkillSameLiter()
    } else if (this.sceneType === 'sell') {
      this.fetchProduct()
      this.fetchSameProduct()
      // this.fetchIsCollect()
    } else if (this.sceneType === 'masterStudio') {
      this.fetchOneStudioWork()
    } else if (this.sceneType === 'ideaCompany') {
      this.fetchSkillLiterById()
    } else if (this.sceneType === 'acquirePrize') {
      this.fetchOneAward()
    }
    this.fetchSkillGetComment()
    this.fetchSkillIsLike()
    this.isCollect()
  },
  methods: {
    // 是否被收藏
     isCollect () {
      var userId = store.state.user.userId
      var dataId = parseInt(this.worksId)
      if (!this.sceneType) {
        var collectType = 2
      } else if (this.sceneType === 'sell') {
        var collectType = 1
      } else if (this.sceneType == 'acquirePrize') {
        var collectType = 4
      }
      console.log(userId, dataId, collectType)
      this.$api.getIsCollect({
        userId,
        dataId,
        collectType
      }).then(res => {
        console.log(res)
        if (res.code === 0) {
          this.isCollects = res.data
        }
      })
    },
    // 添加收藏/取消收藏
    onAddCollect () {
      var userId = store.state.user.userId
      var dataId = parseInt(this.worksId)
      if (userId == '') {
        this.$vux.toast.text('请先登录')
        return
      }
      if (!this.sceneType) {
        var collectType = 2
      } else if (this.sceneType === 'sell') {
        var collectType = 1
      } else if (this.sceneType == 'acquirePrize') {
        var collectType = 4
      }
      console.log(collectType)
      if (!this.isCollects) {
        this.$api.postAddCollect({
          userId,
          dataId,
          collectType
        }).then(res => {
          if (res.code === 0) {
            this.$vux.toast.text('已收藏')
            this.isCollect()
          }
          console.log(res)
        })
      } else {
        this.$api.postDelCollect({
          userId,
          dataId,
          collectType
        }).then(res => {
          console.log(res)
          if (res.code === 0) {
            this.$vux.toast.text('取消收藏')
            this.isCollect()
          }
        })
      }
    },
    // 锚点跳转回首页
    handleHome () {
      this.$router.push('/')
    },
    // 锚点跳转回创意集市 - 创意产品
    handleMarket () {
      this.$router.push('/ideaMarket')
    },
    // 锚点跳转回实战案例
    handleCase () {
      this.$router.push('/skillLift')
    },
    // 跳转到作品详情
    toWorksDetail (id) {
      if (!this.sceneType) {
        this.onOpenExternalLink(`${this.$globalLinkUrl}#/worksDetail?worksId=` + id)
      } else if (this.sceneType === 'sell') {
        this.onOpenExternalLink(`${this.$globalLinkUrl}#/worksDetail?sceneType=sell&worksId=` + id)
      } else if (this.sceneType === 'masterStudio') {
        this.onOpenExternalLink(`${this.$globalLinkUrl}#/worksDetail?sceneType=masterStudio&worksId=` + id)
      } else if (this.sceneType === 'ideaCompany') {
        this.onOpenExternalLink(`${this.$globalLinkUrl}#/worksDetail?sceneType=ideaCompany&worksId=` + id)
      } else if (this.sceneType === 'acquirePrize') {
        this.onOpenExternalLink(`${this.$globalLinkUrl}#/worksDetail?sceneType=acquirePrize&worksId=` + id)
      }
    },
    // !sceneType || sceneType === 'ideaCompany' 时，获取作品详情
    fetchSkillLiterById () {
      this.$api.getSkillLiterById({
        id: this.worksId
      }).then(res => {
        if (res.code === 0) {
          console.log(res)
          this.worksData = res.data
        }
      })
    },
    // 获取评论列表
    fetchSkillGetComment () {
      this.$api.getSkillGetComment({
        id: this.worksId,
        type: !this.sceneType ? 1 : this.sceneType === 'sell' ? 2 : this.sceneType === 'masterStudio' ? 3 : this.sceneType === 'acquirePrize' ? 4 : 1, // 场景type 1 技能提升-名师推荐 2 创意集市 3 工作室 4 获奖作品分析 else 1 企业优秀作品 
      }).then(res => {
        console.log(res)
        if (res.code === 0) {
          this.commentData = res.data
          this.commentTotal = res.total
        }
      })
    },
    // 展开评论
    openMorecommentData () {
      this.isHasOpenComment = false
    },
    // 收起评论
    closeMorecommentData () {
      this.isHasOpenComment = true
    },
    // 提交评论
    handSkilladdComment () {
      this.$api.postSkilladdComment({
        userId: this.$store.state.user.userInfo.userId,
        objectType: !this.sceneType ? 1 : this.sceneType === 'sell' ? 2 : this.sceneType === 'masterStudio' ? 3 : this.sceneType === 'acquirePrize' ? 4 : 1, // 场景type 1 技能提升-名师推荐 2 创意集市 3 工作室 4 获奖作品分析 else 1 企业优秀作品 
        workId: this.worksId,
        content: this.commentConText
      }).then(res => {
        if (res.code === 0) {
          this.commentConText = ''
          this.$vux.toast.text(res.msg)
          this.fetchSkillGetComment()
        }
      })
    },
    // 获取是否点赞
    fetchSkillIsLike () {
      this.$api.postSkillIsLike({
        userId: this.$store.state.user.userInfo.userId,
        workId: this.worksId,
        // objectType: !this.sceneType ? 1 : this.sceneType === 'sell' ? 2 : this.sceneType === 'masterStudio' ? 3 : 1 // 场景type 1 技能提升-名师推荐 2 创意集市 3 工作室 else 1 企业优秀作品
        objectType: !this.sceneType ? 1 : this.sceneType === 'sell' ? 2 : this.sceneType === 'masterStudio' ? 3 : this.sceneType === 'acquirePrize' ? 4 : 1 // 场景type 1 技能提升-名师推荐 2 创意集市 3 工作室 else 1 企业优秀作品
      }).then(res => {
        if (res.code === 0) {
          this.giveLike = JSON.stringify(res.data) === '{}' ? false : res.data
        }
      })
    },
    // 点赞或取消点赞
    onGiveLike () {
      if (this.giveLike === 0) {
        this.$api.postSkillLike({
          userId: this.$store.state.user.userInfo.userId,
          workId: this.worksId,
          objectType: !this.sceneType ? 1 : this.sceneType === 'sell' ? 2 : this.sceneType === 'masterStudio' ? 3 : this.sceneType === 'acquirePrize' ? 4 : 1 // 场景type 1 技能提升-名师推荐 2 创意集市 3 工作室 else 1 企业优秀作品
          // objectType: !this.sceneType ? 1 : this.sceneType === 'sell' ? 2 : this.sceneType === 'masterStudio' ? 3 : 1 // 场景type 1 技能提升-名师推荐 2 创意集市 3 工作室 else 1 企业优秀作品
        }).then(res => {
          if (res.code === 0) {
            this.giveLike = 1
            this.$vux.toast.text(res.msg)
          }
        })
      } else if (!this.sceneType || this.sceneType === 'masterStudio') {
        this.$api.postSkillNotLike({
          userId: this.$store.state.user.userInfo.userId,
          workId: this.worksId,
          // objectType: !this.sceneType ? 1 : this.sceneType === 'sell' ? 2 : this.sceneType === 'masterStudio' ? 3 : 1 // 场景type 1 技能提升-名师推荐 2 创意集市 3 工作室 else 1 企业优秀作品
          objectType: !this.sceneType ? 1 : this.sceneType === 'sell' ? 2 : this.sceneType === 'masterStudio' ? 3 : this.sceneType === 'acquirePrize' ? 4 : 1 // 场景type 1 技能提升-名师推荐 2 创意集市 3 工作室 else 1 企业优秀作品
        }).then(res => {
          if (res.code === 0) {
            this.giveLike = 0
            this.$vux.toast.text(res.msg)
          }
        })
      } else {
        this.$api.postSkillCancelMessage({
          userId: this.$store.state.user.userInfo.userId,
          workId: this.worksId,
          objectType: !this.sceneType ? 1 : this.sceneType === 'sell' ? 2 : this.sceneType === 'masterStudio' ? 3 : this.sceneType === 'acquirePrize' ? 4 : 1 // 场景type 1 技能提升-名师推荐 2 创意集市 3 工作室 else 1 企业优秀作品
          // objectType: !this.sceneType ? 1 : this.sceneType === 'sell' ? 2 : this.sceneType === 'masterStudio' ? 3 : 1 // 场景type 1 技能提升-名师推荐 2 创意集市 3 工作室 else 1 企业优秀作品
        }).then(res => {
          if (res.code === 0) {
            this.giveLike = 0
            this.$vux.toast.text(res.msg)
          }
        })
      }
    },
    // sceneType = sell 时，检查收藏
    // fetchIsCollect () {
    //   this.$api.postIsCollect({
    //     userId: this.$store.state.user.userId,
    //     workId: this.worksId,
    //     objectType: 2
    //   }).then(res => {
    //     if (res.code === 0) {
    //       this.isCollect = res.data
    //     }
    //   })
    // },
    // sceneType = sell 时，收藏或取消收藏
    // fetchCollect () {
    //   if (this.isCollect === 0) {
    //     this.$api.postCollect({
    //       userId: this.$store.state.user.userId,
    //       workId: this.worksId,
    //       objectType: 2
    //     }).then(res => {
    //       if (res.code === 0) {
    //         this.isCollect = 1
    //         this.$vux.toast.text(res.msg)
    //       }
    //     })
    //   } else if (this.isCollect === 1) {
    //     this.$api.postNotCollect({
    //       userId: this.$store.state.user.userId,
    //       workId: this.worksId,
    //       objectType: 2
    //     }).then(res => {
    //       if (res.code === 0) {
    //         this.isCollect = 0
    //         this.$vux.toast.text(res.msg)
    //       }
    //     })
    //   } else {
    //     this.$vux.toast.text('请登录')
    //   }
    // },
    // !sceneType 时，获取同类作品推荐
    fetchSkillSameLiter () {
      this.$api.getSkillSameLiter({
        id: this.worksId
      }).then(res => {
        this.sameWorks = res.data
      })
    },
    // sceneType = sell 时，创意产品详情
    fetchProduct () {
      this.$api.getProduct({
        id: this.worksId
      }).then(res => {
        this.productDetails = res.data
      })
    },
    // sceneType = sell 时，获取同类产品推荐
    fetchSameProduct () {
      this.$api.getSameProduct({
        id: this.worksId
      }).then(res => {
        this.sameWorks = res.data
      })
    },
    // sceneType = masterStudio 时，获取师徒制工作室作品详情
    fetchOneStudioWork () {
      this.$api.getOneStudioWork({
        id: this.worksId
      }).then(res => {
        this.studioWorkData = res.data
      })
    },
    // 站内信
    handSendMessage () {
      if (this.instationMsgContent === '') {
        this.$vux.toast.text('请输入内容')
        return
      }
      this.$api.postSendMessage({
        sender: this.$store.state.user.userId,
        messageContent: this.instationMsgContent,
        receiver: this.productDetails.userId
      }).then(res => {
        if (res.code === 0) {
          this.instationMsg = false
          this.$vux.toast.text(res.msg)
        }
      })
    },
    // sceneType = acquirePrize 获奖作品详情
    fetchOneAward () {
      this.$api.getOneAward({
        id: this.worksId
      }).then(res => {
        console.log(res)
        if (res.code === 0) {
          this.acquirePrizeData = res.data
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
#worksDetail{
  .worksDetailContent{
    width: 1200px;
    margin: auto;
    padding: .2rem 0;
    /deep/ .vux-popup-dialog.vux-popup-top {
      width: 6rem;
      top: 50%;
      right: auto;
      bottom: auto;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .worksDetailContentBox{
      background-color: #fff;
      padding: .2rem;
      margin-bottom: .5rem;
      .worksDetailTitle{
        font-size: 0;
        padding-bottom: .2rem;
        border-bottom: 2px solid #eee;
        .worksDetailTitleInfo{
          display: inline-block;
          width: 70%;
          vertical-align: top;
          position: relative;
          h2{
            font-size: .2rem;
            font-weight: 500;
            color: #333;
            line-height: .28rem;
          }
          p{
            font-size: .16rem;
            font-weight: 500;
            color: #999;
            line-height: .24rem;
          }
          .worksDetailPrice{
            padding-right: .2rem;
            span{
              font-size: .24rem;
              font-weight: 500;
              line-height: .32rem;
              color: red;
            }
            button{
              font-size: .16rem;
              color: #999;
              font-weight: 500;
              line-height: .3rem;
              padding: 0 .3rem;
              border: 1px solid #eee;
              background-color: #fff;
              float: right;
              outline: none;
            }
            .blue{
              // border: 1px solid #15A29C;
              color: #fff;
              background-color: #15A29C;
            }
          }
          .worksDetailShare:hover{
            .worksDetailShareLargeQrcode{
              opacity: 1;
              z-index: 10;
            }
          }
          .worksDetailShare{
            position: absolute;
            right: .2rem;
            top: 0;
            button{
              font-size: .16rem;
              color: #999;
              font-weight: 500;
              line-height: .3rem;
              padding: 0 .3rem;
              border: 1px solid #eee;
              background-color: #fff;
              float: right;
              outline: none;
            }
            img.worksDetailShareThumb{
              width: .4rem;
              height: .4rem;
            }
            .worksDetailShareLargeQrcode {
              position: absolute;
              top: 140%;
              right: 50%;
              transform: translateX(50%);
              box-shadow: 0 0 .1rem #eee;
              opacity: 0;
              z-index: -2;
              transition: all ease .5s;
              padding: .15rem;
              background-color: #fff;
              span{
                display: inline-block;
                width: .15rem;
                height: .15rem;
                position: absolute;
                top: -.075rem;
                right: 50%;
                transform: translateX(50%) rotate(45deg);
                z-index: -1;
                background-color: #fff;
                box-shadow: 0 0 .1rem #eee;
              }
            }
          }
        }
        .worksDetailStylistInfo{
          display: inline-block;
          width: 30%;
          border-left: 2px solid #eee;
          padding-left: .2rem;
          img{
            width: .8rem;
            height: .8rem;
            display: inline-block;
            vertical-align: top;
            border-radius: 500px;
          }
          .worksDetailStylistInfoBox{
            display: inline-block;
            width: calc(100% - 1rem);
            padding-left: .2rem;
            h2{
              font-size: .2rem;
              font-weight: 500;
              color: #333;
              line-height: .4rem;
            }
            p{
              font-size: .16rem;
              font-weight: 500;
              color: #999;
              line-height: .4rem;
            }
          }
          .btnBox{
            margin-top: .1rem;
            button{
              border-radius: 0;
              background-color: #fff;
              color: #15A29C;
              line-height: .3rem;
            }
          }
        }
      }
      .worksDetailRichtext{
        padding: .4rem 0;
        img{
          max-width: 100%;
        }
        video {
          max-width: 100%;
        }
      }
      .worksDetailComment{
        .worksDetailAppraise{
          text-align: center;
          label.worksDetailPraise{
            display: inline-block;
            width: 1rem;
            height: 1rem;
            background-color: #15A29C;
            border-radius: 500px;
          }
          label.worksDetailTread{
            text-align: center;
            img {
              width: .5rem;
              height: .5rem;
              display: inline-block;
              background-color: rgba(0,0,0,0);
              margin-top: .12rem;
            }
            p{
              font-size: .16rem;
              font-weight: 500;
              color: #fff;
              line-height: .24rem;
            }
          }
        }
        .worksDetailPublishComment{
          padding: .2rem 0;
          text-align: right;
          textarea {
            width: 100%;
            height: 2rem;
            border: 1px solid #ccc;
            border-radius: .05rem;
            padding: .1rem;
          }
          .btnBox{
            display: inline-block;
            padding-top: .2rem;
            button{
              padding: 0 .3rem;
            }
          }
        }
        .worksDetailCommentList{
          h2{
            font-size: .16rem;
            font-weight: 500;
            color: #333;
            line-height: .24rem;
            border-top: 1px solid #ccc;
            padding-top: .2rem;
          }
          ul{
            padding-top: .2rem;
            li{
              font-size: 0;
              padding-bottom: .2rem;
              img{
                display: inline-block;
                width: 1rem;
                height: 1rem;
                border-radius: 500px;
                vertical-align: top;
              }
              .worksDetailCommentInfo{
                display: inline-block;
                width: calc(100% - 1rem);
                padding-left: .2rem;
                h3{
                  font-size: .2rem;
                  font-weight: bold;
                  color: #333;
                  line-height: .333rem;
                }
                p{
                  font-size: .16rem;
                  font-weight: 500;
                  color: #333;
                  line-height: .333rem;
                }
                span{
                  font-size: .14rem;
                  font-weight: 500;
                  color: #999;
                  line-height: .333rem;
                }
              }
            }
          }
          .openComment{
            height:360px;
            overflow: hidden;
          }
          h3{
            text-align: center;
            // width:100px;
            // height:20px;
            // background: #15A29C;
          }
        }
      }
    }
    .courseDetailContetnRecommend{
      background-color: #fff;
      .courseDetailContetnRecommendTitle {
        font-size: .2rem;
        font-weight: 500;
        color: #15A29C;
        line-height: .32rem;
        padding: .2rem;
        border-bottom: 0.01rem solid #eee;
      }
      ul{
        li:nth-child(5n){
          margin-right: 0;
        }
        li{
          display: inline-block;
          margin-right: .125rem;
          margin-bottom: .125rem;
          box-shadow: 0 0 10px #eee;
          img{
            display: inline-block;
            width: 2.22rem;
            height: 1.5rem;
          }
          .practicalClassroomContentCourseInfo{
            padding: .1rem;
            position: relative;
            h3{
              font-weight: 500;
              color: #333;
              font-size: .16rem;
              line-height: .24rem;
            }
            div.publicBookRemark{
              padding: 0 .05rem;
              img{
                width: .12rem;
                height: .12rem;
                display: inline-block;
              }
              span{
                font-size: 0.13rem;
                font-weight: 500;
                color: #aaa;
                line-height: 0.16rem;
              }
            }
            p{
              font-weight: 500;
              color: #666;
              font-size: .14rem;
              line-height: .22rem;
              i{
                font-weight: 500;
                color: red;
                font-size: .14rem;
                line-height: .22rem;
                font-style: normal;
              }
              b{
                text-decoration: line-through;
                font-weight: 500;
                color: #999;
                font-size: .14rem;
                line-height: .22rem;
                padding-left: .05rem;
              }
            }
            .btnBox{
              display: inline-block;
              float: right;
              position: absolute;
              right: .1rem;
              bottom: .1rem;
              .btnDef{
                font-size: .14rem;
                line-height: .25rem;
                padding: 0 .05rem;
              }
            }
          }
        }
      }
    }
    .courseDetailIinstationMsg{
      border-radius: .1rem;
      background-color: #fff;
      .userApprovePopupTitle{
        background-color: #15A29C;
        padding: .15rem .2rem;
        h2{
          font-size: .2rem;
          font-weight: 500;
          color: #fff;
          line-height: .28rem;
          display: inline-block;
        }
        i{
          font-style: normal;
          color: #fff;
          float: right;
          width: .25rem;
          text-align: center;
        }
      }
      .courseDetailIinstationMsgCon{
        padding: .2rem;
        textarea{
          width: 100%;
          height: 3rem;
          margin-bottom: .2rem;
          border: 1px solid #eee;
        }
        .btnBox{
          width: 2rem;
          float: right;
          .btnDef{

          }
        }
      }
    }
  }
}
</style>
